// 购物车组件
import React,{Component} from 'react'
import './index.css'
import {Link} from 'react-router-dom'
class Cart extends Component{
	
	// 类式的组件的数据放置到state 
	constructor(props) { //props 父传子的数据
	    super(props)
		this.state={ //本组件使用的数据
			name:"小王",
			list:["老王","老张","老李"],
			obj:{kk:11,ss:22},
			val:"" //输入框绑定的值
		}
		this.run=this.run.bind(this);//绑定this
		this.change=this.change.bind(this)
	}
	 run(){
		alert("点击事件")
		// react改变数据  
		this.setState({
			name:"小王人真好"
		})
	}
	change(e){
		this.setState({
			val:e.target.value
		})
	}	
	// render react的生命周期 渲染中
	render(){
		return (
			<div>
				<h1 className="carttitle" >我是购物车组件</h1>
				<h1>
					<Link to="/pay">去支付组件</Link>
				</h1>
				<input  onInput={this.change} value={this.state.val}   />	
				<h1>{this.state.val}</h1>
				<h1>{this.props.money}</h1>	
				<h1 onClick={this.run}>{this.state.name}</h1>
				<ul>
					{this.state.list.map((item,index)=>{
						return <li key={index}>{item}</li>
					})}
				</ul>
			</div>
		)
	}
}
export default Cart



// // es5的构造函数
// function Car(name,color){
// 	this.name=name;
// 	this.color=color;
// 	this.run=function(){}
// }
// var benchi=new Car("奔驰","白色")

// // es6的构造函数
// class Car{
// 	constructor(name,color) {
// 		this.name=name;
// 		this.color=color;
// 	}
	
// 	run(){}
// }
// var qq=new Car("qq","红色")
// // es6的构造函数的继承

// class ProCar extends Car{
// 	constructor() {
// 	    super("新能源","蓝色")
// 	}
	
	
// }